<template>
  <div class="module">
    <div class="actions" :class="{ over: isOver }">
      <div class="inner">
        <slot name="page-actions" />
      </div>
    </div>
    <div class="page-content">
      <slot name="page-content" />
    </div>
    <slot />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isOver: false
    }
  },
  created() {
    window.onscroll = () => {
      if (document.documentElement.scrollTop > 84) {
        this.isOver = true
      } else {
        this.isOver = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.module {
  .actions {
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 0;
    backdrop-filter: blur(6px);
    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    &.over {
      position: fixed;
      right: 0;
      left: 190px;
      top: 84px;
      z-index: 10;
      padding-right: 20px;
      box-shadow: 0 0 10px rgb(145, 158, 171, 0.2);
      
    }
  }
  .page-content {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgb(145, 158, 171, 0.2);
    margin-top: 5px;
  }
}
</style>